<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"></html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="format-detection" content="telephone=no" />
    <title>地图</title>
    <meta content="" name="keywords" />
    <meta content="" name="description" />
    <meta content="" name="copyright" />
    <meta content="" name="author" />
    <meta name="robots" content="noarchive">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/urlTool.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e88c378a8cefd5af10405e60cb496c0f&plugin=AMap.DistrictSearch"></script>
    <style>
        .amap-logo{opacity:0;}
        .amap-copyright{opacity:0;}
    </style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div style="width:100%;height:380px" id="main" >
</div>

<script>
    var msg;
    // 查询相关地区的景区数量
    function getNum(province){
        sm.req({
            url: 'json/getProvinceMsg.json'
            ,dataType:'json'
            ,type:'get'
            , data: {province:province}
            , done: function (res) {
                msg=res.data;
            }
        })
    }

    $(function(){
        getMap('china_full')
    })
    function getMap(province){
        $('#main').html('<div id="'+province+'" style="width:100%;height:380px;"></div>');
        getNum(province);
        var myChart = echarts.init(document.getElementById(province));
        sm.req({
            url: 'json/'+province+'.json'
            ,type:'get'
            , done:function (data) {
            echarts.registerMap(province, data);
            myChart.setOption({
                // title: {
                //     text: '请选择省份',
                //     subtext: '点击进入'
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (景区)'
                },
                toolbox: {
                    show: false,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 0,
                    max: 600,
                    // text: ['High', 'Low'],
                    realtime: false,
                    calculable: false,
                    show:false,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [
                    {
                        type: 'map',
                        mapType: province, // 自定义扩展图表类型
                        zoom: 1.25, //当前视角的缩放比例
                        roam: true, //是否开启平游或缩放
                        label: {
                            show: province==='china_full'?false:true
                        },
                        data: msg
                    }
                ]
            })
        }
        })
        myChart.on('click', function (params) {
            // 在用户点击后控制台打印数据的名称
            if(province==='china_full'){
                getMap(params.data.code);
            }
            else{
                var imageLayer = new AMap.ImageLayer({
                    url: 'qqq.jpg',
                    bounds: new AMap.Bounds(
                        [116.949505,36.607808],   //左下角
                        [117.100911,36.743008]    //右上角
                    ),
                    zooms: [2, 18]
                });
                var code=params.data.code;
                $('#main').html('<div id="'+code+'" style="width:100%;height:1000px !important"></div>');
                var map = new AMap.Map(code,{
                    features:['bg','road','building'],
                   layers: [
                    new AMap.TileLayer(),
                        imageLayer
                    ]
                });
                map.setCity(params.data.name,function(e){
                    map.setZoom(10);
                    drawBounds(params.data.name,map);
                });
                //DOTO 标注景区
                var marker = new AMap.Marker({
                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [117.12769,36.210205],
                    extData:'66666'
                });
                marker.setLabel({
                    offset: new AMap.Pixel(0, 20),  //设置文本标注偏移量
                    content: "<div class='info'>泰山</div>", //设置文本标注内容
                    direction: 'center' //设置文本标注方位

                });
                map.add(marker);
                marker.on( 'click', function(e) {
                    //得到的数据
                });
            }
        });
    }
    var district = null;
    var polygons=[];
    function drawBounds(name,map) {
        //加载行政区划插件
        if(!district){
            //实例化DistrictSearch
            var opts = {
                subdistrict: 0,   //获取边界不需要返回下级行政区
                extensions: 'all',  //返回行政区边界坐标组等具体信息
                level: 'city'  //查询行政级别为 市
            };
            district = new AMap.DistrictSearch(opts);
        }
        //行政区查询
        district.setLevel('city')
        district.search(name, function(status, result) {
            map.remove(polygons)//清除上次结果
            polygons = [];
            var bounds = result.districtList[0].boundaries;
            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                    //生成行政区划polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: '#80d8ff',
                        strokeColor: '#0091ea'
                    });
                    polygons.push(polygon);
                }
            }
            map.add(polygons)
            map.setFitView(polygons);//视口自适应
        });
    }


</script>
</body>
</html>